<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>私信界面</title>
		<!-- Bootstrap -->
		<link rel="stylesheet" th:href="@{/front/css/zerogrid.css}">
		<link rel="stylesheet" th:href="@{/front/css/style.css}">
		<link rel="stylesheet" th:href="@{/front/css/responsive.css}">
		<link th:href="@{/assets/bootstrap/dist/css/bootstrap.min.css}" rel="stylesheet">
		<link th:href="@{/front/css/main.css}" rel="stylesheet">
	</head>
	<!--背景色-->
	<body>
		<div class="wrap-body">
			<div th:replace="front/common/nav :: nav"></div>
			<header>
				<div class="wrap-header zerogrid">
				<!-- 头部 -->
				<nav class="navbar navbar-default" role="navigation">
					<div class="container-fluid">
						<div class="navbar-header">
							<a class="navbar-brand" href="#"><span th:text="${film.filmname}"></span>-聊天室</a>
							<input id="input_roomName" style="width: 10em" type="hidden" th:value="${film.filmname}"  placeholder="房间号">
							<input id="enter_room" class="btn btn-default" type="button" style="margin-top: 7px;display: none;" value="进入聊天室" onclick="initWebSocket()">
							<input class="btn btn-default" type="button" style="margin-top: 7px;" value="退出聊天室" onclick="closeWs()">
						</div>
					</div>
				</nav>
				</div>
			</header>
			<!--整体布局-->
			<<div class="zerogrid" style="margin-bottom: 20px;">
				<div id="zhongjian">
					<div class="row">
						<div class="col-sm-12">
							<div class="ibox chat-view ">
								<div class="ibox-title">
									<small class="pull-right text-muted" style="color: #fff;">最新消息：2018-06-21 </small> 聊天窗口
								</div>
								<div class="ibox-content col-lg-12">
									<div class="row">
										<div class="col-md-12 ">
											<div id="msg_board" class="chat-discussion msg_board">
											</div>
										</div>
									</div>
									<div class="row">
										<div class="col-sm-12">
											<div class="chat-message-form">

												<div class="form-group">

													<textarea id="input_msg" class="form-control message-input" name="message" placeholder="输入消息内容"></textarea>

													<div class="buttongroup" style="float: right;margin-top: 4px;height: 38px">
														<input id="quxiaobtn" type="reset" class="btn btn-default" value="取消" />&nbsp;&nbsp;
														<input id="btn"  type="button" onclick="send_msg()" class="btn btn-default" value="确定" />
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
			</div>
			</div>
			<!--////////////////////////////////////Footer-->
			<div th:replace="front/common/footer :: footer"></div>
		</div>
	</body>
	<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
	<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
	<script th:src="@{/js/jquery.min.js}"></script>
	<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
	<script th:src="@{/assets/bootstrap/dist/js/bootstrap.js}"></script>
	<script type="text/javascript" th:src="@{/assets/layer/layer.js}"></script>
	<script type="text/javascript">
        $(document).ready(function(){
            $("#quxiaobtn").click(function(){
                $("#text").val('');
            });
            initWebSocket();
        });

        <!-- 聊天js -->
        var webSocket;

        function send_msg() {
            if (webSocket != null) {
                var input_msg = $("#input_msg").val().trim();
                if (input_msg == "") {
                    return;
                }
                webSocket.send(input_msg);
                // 清除input框里的信息
                $("#input_msg").val("");
            } else {
                layer.alert("您已掉线，请重新进入聊天室...");
            }
        };

        function closeWs() {
            webSocket.close();
        };

        function initWebSocket() {
            var roomName = $("#input_roomName").val();
            // 房间名不能为空
            if (roomName == null || roomName == "") {
                layer.alert("请输入房间名");
                return;
            }
            if ("WebSocket" in window) {
                if (webSocket == null) {
                    var url = "ws://localhost:9000/cms/f/webSocket/chat/" + roomName;
                    // 打开一个 web socket
                    webSocket = new WebSocket(url);
                } else {
                    layer.msg("您已进入聊天室...");
                }

                webSocket.onopen = function () {
                    layer.msg("已进入聊天室，畅聊吧...");
                    $("#enter_room").css("display","none");
                };

                webSocket.onmessage = function (evt) {
                    var msg_board = $("#msg_board");
                    var received_msg = evt.data;
                    var old_msg = msg_board.html();
                    msg_board.html(old_msg + received_msg);
                    // 让滚动块往下移动
                    msg_board.scrollTop = msg_board.scrollHeight;
                };

                webSocket.onclose = function () {
                    // 关闭 websocket，清空信息板
                    layer.alert("连接已关闭...");
                    webSocket = null;
                    $("#msg_board").html("");
                    $("#enter_room").css("display","inline");
                };
            }
            else {
                // 浏览器不支持 WebSocket
                layer.alert("您的浏览器不支持 WebSocket!");
            }
        }
	</script>
</html>